<template>
    <div class="app-container">
        <avue-crud :option="option" :data="data" :table-loading="loading" :page.sync="page"
            @on-load="onLoad"  @current-change="currentChange" @search-change="searchChange" @search-reset="resetChange">
            <template slot="menuLeft">
                <el-button v-has="'subscribeExport'" type="primary" icon="el-icon-download" size="small" :disabled="page.total == 0" :loading="downLoading" @click.stop="handleDownload">导出</el-button>
           </template>
            <template slot="menu" slot-scope="scope">
                <el-button size="small" type="text" @click="checkOpen(scope.row)" icon="el-icon-view">查看</el-button>
                <el-button size="small" type="text" @click="rowDel(scope.row)" icon="el-icon-delete" v-has="'subscribeDelete'">删除</el-button>
            </template>
        </avue-crud>
        <!-- 操作 -->
        <el-dialog title="操作" :visible.sync="checkDialog" width="50%" center>
            <el-form ref="form" :model="dataList"  label-width="100px">
                <div class="message">
                    <div class="module">
                        <el-tabs v-model="active">
                            <el-tab-pane label="企业信息" name="first">
                                <table class="detailtable">
                                    <tr>
                                        <td width="15%">企业名称</td>
                                        <td width="35%">{{dataList.qymc}}</td>
                                        <td width="15%">统一社会信用代码</td>
                                        <td width="35%">{{dataList.shtyxydm}}</td>
                                    </tr>
                                    <tr>
                                        <td width="15%">法人姓名</td>
                                        <td width="35%">{{dataList.fddbr}}</td>
                                        <!-- <td width="15%">联系方式</td>
                                        <td width="35%">{{dataList.dh}}</td> -->
                                        <td width="15%">注册时间</td>
                                        <td width="35%">{{dataList.clrq}}</td>
                                    </tr>
                                    <tr>
                                        <td width="15%">注册资金</td>
                                        <td width="35%">{{dataList.zczb}}万元</td>
                                        <td width="15%">所属行业</td>
                                        <td width="35%">{{dataList.sshy}}</td>
                                    </tr>
                                    <tr>
                                        <td width="15%">所属区域</td>
                                        <td width="35%">{{dataList.ssqu}}</td>
                                    </tr>
                                    <tr>
                                        <td width="15%">企业类型</td>
                                        <td colspan="3">{{dataList.qylx | filterQylx(qylxList)}}</td>
                                    </tr>
                                    <tr>
                                        <td width="15%">注册地址</td>
                                        <td colspan="3">{{dataList.zs}}</td>
                                    </tr>
                                </table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
<!--                    <div class="module">-->
<!--                        <el-tabs v-model="active">-->
<!--                            <el-tab-pane label="法人信息" name="first">-->
<!--                                <table class="detailtable">-->
<!--                                    <tr>-->
<!--                                        <td width="15%">法人姓名</td>-->
<!--                                        <td width="35%">{{dataList.fddbr}}</td>-->
<!--                                        <td width="15%">性别</td>-->
<!--                                        <td width="35%">{{dataList.xb}}</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="15%">出生日期</td>-->
<!--                                        <td width="35%">{{dataList.csrq}}</td>-->
<!--                                        <td width="15%">学历</td>-->
<!--                                        <td width="35%">{{dataList.xl}}</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="15%">证件号码</td>-->
<!--                                        <td width="35%">{{dataList.sfzjhm}}</td>-->
<!--                                        <td width="15%">电话号码</td>-->
<!--                                        <td width="35%">{{dataList.lxdh}}</td>-->
<!--                                    </tr>-->
<!--                                </table>-->
<!--                            </el-tab-pane>-->
<!--                        </el-tabs>-->
<!--                    </div>-->
                    <div>
                        <el-tabs v-if="qyfxInfo">
                            <el-tab-pane label="企业分析" >
                                <table class="detailtable">
                                    <tr>
                                        <td width="25%" style="text-align: center">分析指标</td>
                                        <td width="25%" style="text-align: center">指标评级</td>
                                        <td width="25%" style="text-align: center">分析指标</td>
                                        <td width="25%" style="text-align: center">指标评级</td>
                                    </tr>
                                    <tr>
                                        <td width="25%" style="text-align: center">社保缴纳信息</td>
                                        <td width="25%" style="text-align: center">
                                            <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    v-model="visible1">
                                                <div style="text-align: right; margin: 0">
                                                    <el-table :data="scoreSb" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                        <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                        <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                                    </el-table>
                                                </div>
                                                <span slot="reference" class="tips" v-if="qyfxInfo.sb">{{qyfxInfo.sb}}</span>
                                                <span slot="reference" class="tips" v-else>暂无评级</span>
                                            </el-popover></td>
                                        <td width="25%" style="text-align: center">企业欠税</td>
                                        <td width="25%" style="text-align: center">
                                            <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    v-model="visible2">
                                                <div style="text-align: right; margin: 0">
                                                    <el-table :data="scoreQs" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                        <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                        <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                                    </el-table>
                                                </div>
                                                <span slot="reference" class="tips" v-if="qyfxInfo.qs">{{qyfxInfo.qs}}</span>
                                                <span slot="reference" class="tips" v-else>A</span>
                                            </el-popover>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="25%" style="text-align: center">行政处罚</td>
                                        <td width="25%" style="text-align: center">
                                            <el-popover
                                                    placement="bottom"
                                                    trigger="hover"
                                                    v-model="visible3">
                                                <div style="text-align: right; margin: 0">
                                                    <el-table :data="scoreCf" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                        <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                        <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                                    </el-table>
                                                </div>
                                                <span slot="reference" class="tips" v-if="qyfxInfo.cf">{{qyfxInfo.cf}}</span>
                                                <span slot="reference" class="tips" v-else>A</span>
                                            </el-popover>
                                        </td>
                                        <td width="25%" style="text-align: center">环保评级</td>
                                        <td width="25%" style="text-align: center">
                                            <el-popover
                                                    placement="bottom"
                                                    trigger="hover"
                                                    v-model="visible4">
                                                <div style="text-align: right; margin: 0">
                                                    <el-table :data="scoreHb" style="width: 100%" :header-cell-style="{background:'#f2f9fe'}">
                                                        <el-table-column prop="level" label="等级" width="100" align="center"></el-table-column>
                                                        <el-table-column prop="des" label="描述" width="400" align="center"></el-table-column>
                                                    </el-table>
                                                </div>
                                                <span slot="reference" class="tips" v-if="qyfxInfo.hb">{{qyfxInfo.hb}}</span>
                                                <span slot="reference" class="tips" v-else>暂无评级</span>
                                            </el-popover></td>
                                    </tr>
                                </table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
<!--                    <div class="module">-->
<!--                        <el-tabs v-model="active">-->
<!--                            <el-tab-pane label="融资需求" name="first">-->
<!--                                <table class="detailtable">-->
<!--                                    <tr>-->
<!--                                        <td width="15%">需求金额</td>-->
<!--                                        <td width="35%">100万元</td>-->
<!--                                        <td width="15%">担保方式</td>-->
<!--                                        <td width="35%">不限</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="15%">融资期限</td>-->
<!--                                        <td width="35%">24个月</td>-->
<!--                                        <td width="15%">融资用途</td>-->
<!--                                        <td width="35%">扩大经营</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="15%">还款来源</td>-->
<!--                                        <td width="35%">经营性收入</td>-->
<!--                                        <td width="15%">备注</td>-->
<!--                                        <td width="35%"></td>-->
<!--                                    </tr>-->
<!--                                </table>-->
<!--                            </el-tab-pane>-->
<!--                        </el-tabs>-->
<!--                    </div>-->
<!--                    <div class="module">-->
<!--                        <el-tabs v-model="active">-->
<!--                            <el-tab-pane label="建模信息" name="first">-->
<!--                                <table class="detailtable">-->
<!--                                    <tr>-->
<!--                                        <td width="20%">自然人社保缴纳信息</td>-->
<!--                                        <td width="30%">A</td>-->
<!--                                        <td width="20%">行政处罚信息</td>-->
<!--                                        <td width="30%">A</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="20%">欠税信息</td>-->
<!--                                        <td width="30%">A</td>-->
<!--                                        <td width="20%">企业环保评级信息</td>-->
<!--                                        <td width="30%">B</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td width="20%">预授信额度</td>-->
<!--                                        <td width="30%" colspan="3">100万元</td>-->
<!--                                    </tr>-->
<!--                                </table>-->
<!--                            </el-tab-pane>-->
<!--                        </el-tabs>-->
<!--                    </div>-->
<!--                    <div class="module">-->
<!--                        <el-tabs v-model="active">-->
<!--                            <el-tab-pane label="融资额度" name="first">-->
<!--                                <el-row :gutter="20">-->
<!--                                    <el-col :span="8">-->
<!--                                        <el-form-item label="是否放款:" class="formItem">-->
<!--                                            <el-radio v-model="rzform.isFk" :label="1">是</el-radio>-->
<!--                                            <el-radio v-model="rzform.isFk" :label="0">否</el-radio>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="14"  v-if="rzform.isFk == 0">-->
<!--                                        <el-form-item label="拒绝原因:" class="formItem">-->
<!--                                            <el-input placeholder="请输入内容" v-model="rzform.jjyy"></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                                <el-row :gutter="20"  v-if="rzform.isFk == 1">-->
<!--                                    <el-col :span="8">-->
<!--                                        <el-form-item label="放款金额:" class="formItem">-->
<!--                                            <el-input placeholder="放款金额" v-model="rzform.fkje"></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="8">-->
<!--                                        <el-form-item label="放款利率:" class="formItem">-->
<!--                                            <el-input placeholder="放款利率" v-model="rzform.fklv"></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="8">-->
<!--                                        <el-form-item label="放款时间:" class="formItem">-->
<!--                                            <el-input placeholder="放款时间" v-model="rzform.fksj"></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </el-tab-pane>-->
<!--                        </el-tabs>-->
<!--                    </div>-->
                    <div class="module" v-if="dataList.isBlack == '0'">
                        <el-tabs v-model="active">
                            <el-tab-pane label="列入原因" name="first">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="黑名单类型:" class="formItem">
                                            <el-select v-model="dataList.hmdzl" class="w100" placeholder="请选择黑名单类型" disabled>
                                                <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="16">
                                        <el-form-item label="列入原因:">
                                            <el-input v-model="dataList.addCase" autosize type="textarea" placeholder="请输入列入原因" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="操作人:">
                                            {{dataList.ename}}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
<!--                <div class="dialog-footer">-->
<!--                    <el-button type="primary">提交</el-button>-->
<!--                    <el-button @click="checkDialog = false" type="primary">取消</el-button>-->
<!--                </div>-->
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {
        addW,
        getW,
        getC,
        moveToPurpose,
        delW,
        qyfx,
    } from '@/api/manager.js'
    import store from '@/store'
    import {getField} from '@/api/user.js'
    export default {
        data() {
            return {
                loading: false,
                downLoading: false,
                qylxList:[],
                qyfxInfo:{},
                checkDialog:false,
                visible1:false,
                visible2:false,
                visible3:false,
                visible4:false,
                dataList:{},
                active:'first',
                searchList:{},
                /* 分页 */
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    background:false
                },
                data: [],
                options:[
                    {label:'存在强制执行',value:'存在强制执行'},
                    {label:'负债较高',value:'负债较高'},
                    {label:'多次逾期',value:'多次逾期'},
                    {label:'其他',value:'其他'}
                ],
                scoreSb:[
                    {des:'近1年企业实缴金额不低于上年实缴金额',level:'A'},
                    {des:'近1年企业实缴金额低于上年20%及以内',level:'B'},
                    {des:'近1年企业实缴金额低于上年50%及以内',level:'C'},
                    {des:'近1年企业实缴金额低于上年50%以上',level:'D'},
                ],
                scoreQs:[
                    {des:'无欠税记录',level:'A'},
                    {des:'1条欠税记录',level:'B'},
                    {des:'2条及以上欠税记录',level:'C'},
                ],
                scoreCf:[
                    {des:'无行政处罚记录',level:'A'},
                    {des:'1条行政处罚记录',level:'B'},
                    {des:'2条及以上行政处罚记录',level:'C'},
                ],
                scoreHb:[
                    {des:'环保评价为绿色',level:'A'},
                    {des:'环保评价为蓝色',level:'B'},
                    {des:'环保评价为黄色',level:'C'},
                    {des:'环保评价为红色',level:'D'},
                    {des:'环保评价为黑色',level:'E'},
                ],
                option: {
                    headerAlign: 'center',
                    align: 'center',
                    border: true,
                    card: true,
                    defaultExpandAll: true,
                    dialogDrag: false,
                    labelWidth: 135,
                    viewBtn: false,
                    delBtn:false,
                    excelBtn: false,
                    editBtn:false,
                    addBtn:false,
                    selection: false,
                    searchLabelWidth: '20%',
                    searchSpan: 8,
                    searchMenuSpan: 4,
                    columnBtn: false,
                    refreshBtn: false,
                    selectClearBtn: false,
                    // searchBtn: true,
                    searchShowBtn: false,
                    column: [{
                            label: '企业名称',
                            prop: 'qymc',
                            display: false,
                            search: true
                        },
                        {
                            label: '统一社会信用代码',
                            prop: 'shtyxydm',
                            display: false,
                            search: true,
                            searchLabelWidth: '35%',
                        },
                        {
                            label: '企业类型',
                            prop: 'qylx',
                            type: 'select',
                            dicData: [],
                            display: false,
                        },
                        {
                            label: '法人姓名',
                            prop: 'fddbr',
                            display: false,
                            align:'center',
                            search: true
                        },
                        // {
                        //     label: '联系方式',
                        //     prop: 'dh',
                        //     display: false
                        // },
                        {
                            label: '是否黑名单',
                            prop: 'isBlack',
                            display: false,
                            type: 'select',
                            dicData: [{
                                label: '是',
                                value: '0'
                            }, {
                                label: '否',
                                value: '1'
                            }],
                            search: true
                        },
                        {
                            label: '订阅时间',
                            prop: 'createTime',
                            display: false
                        },
                    ],
                },
                rzform:{}
            }
        },
        created(){
            let params = {
                page: 1,
                size: 100,
                code:'QYLX'
            } 
            getField(params).then(res=>{
                if(res.status){
                    this.qylxList = res.data.records;
                    this.option.column[2].dicData = res.data.records.map(item=>{
                        return {label:item.fieldName,value:item.fieldCode}
                    })
                }
            })
        },
        computed: {
            headers() {
                return {
                    "TOKEN": this.$store.getters.token
                }
            }
        },
        filters:{
            filterQylx(val,qylxList){
                if(!val)return
                var isnum = /^\d+$/.test(val);
                if(isnum){
                    return qylxList.filter(item=>item.fieldCode == val)[0].fieldName;
                }else{
                    return val;
                }
                
            }
        },
        methods: {
            onLoad(page, params = {}) {
                let searchList = this.searchList
                Object.assign(params, {
                    ...searchList,
                    pageNum: this.page.currentPage,
                    pageSize: this.page.pageSize
                });
                this.loading = true;
                getW(params).then(data => {
                    if (data.status) {
                        this.loading = false;
                        this.data = data.data.records;
                        this.page.total = data.data.total;
                    }
                });
            },
            /* 清空 */
            resetChange() {
                this.page.currentPage = 1;
                this.page.pageSize = 10;
                this.searchList = {}
                this.onLoad();
            },
            /* 搜索筛选 */
            searchChange(params, done) {
                done();
                this.page.currentPage = 1;
                this.page.pageSize = 10;
                this.searchList = {
                    ...params
                }
                this.onLoad();
            },
            /* 查看 */
            checkOpen(row){
                this.checkDialog = true;
                this.dataList = {...row};
                qyfx({shtyxydm:row.shtyxydm}).then(data1 => {
                    if (data1.status) {
                        this.box = true;
                        this.qyfxInfo = data1.data ? data1.data : {}
                    }else{
                        this.$message.error(data1.msg);
                    }
                });
                this.rzform={
                    isFk:1
                };
            },
            /* 改变页码 */
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            /* 删除 */
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    delW({
                        'shtyxydm': row.shtyxydm
                    }).then((res) => {
                        this.onLoad(this.page);
                        if (res.status) {
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            });
                        }
                    });
                })
            },
            handleDownload(){
                let searchList = this.searchList
                let params = {
                    ...searchList,
                    pageNum: 1,
                    pageSize: this.page.total
                }
                this.downLoading = true;
                getW(params).then(res => {
                    this.downLoading = false;
                    if (res.status) {
                        let data = res.data.records.map(item=>{
                            return {
                                ...item,
                                isBlack:item.isBlack == '0' ? '是' : '否'
                            }
                        });
                        let opt = {
                            title: '订阅客户',
                            column: [{
                                    label: '企业名称',
                                    prop: 'qymc',
                                },
                                {
                                    label: '统一社会信用代码',
                                    prop: 'shtyxydm',
                                },
                                {
                                    label: '企业类型',
                                    prop: 'qylx',
                                },
                                {
                                    label: '法人姓名',
                                    prop: 'fddbr',
                                },
                                // {
                                //     label: '联系方式',
                                //     prop: 'dh',
                                // },
                                {
                                    label: '是否黑名单',
                                    prop: 'isBlack',
                                },
                                {
                                    label: '订阅时间',
                                    prop: 'createTime',
                                }
                            ],
                            data: data
                        }
                        this.$Export.excel({
                            title: opt.title ,
                            columns: opt.column,
                            data: opt.data
                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                });
            }
        }
    }
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination{
    text-align: center;
}
.dialog-footer {
  text-align: center;margin: 20px auto;
}
.tips{
    color: #4a8bf6;
    font-size: 14px;
}
.detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
.detailtable tr{width: 100%;}
.detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
.detailtable td{font-weight: normal; background-color:#fff}
.detailtable td{word-break:break-all;}
</style>
